<template>
  <div class="base-container">
    <el-card class="base-box-card">
      <span class="point">说明：目前支持学科和关键字条件筛选</span>
      <el-button
        type="success"
        class="addTest"
        icon="el-icon-edit"
        size="mini"
        @click="addTest"
        >新增试题</el-button
      >
      <el-row class="form-row">
        <el-form
          ref="baseTest"
          :model="baseTestForm"
          label-width="80px"
          size="small"
        >
          <el-col :span="6">
            <el-form-item
              label="学科"
              label-position="left"
              prop="subjectSelect"
            >
              <el-select
                v-model="baseTestForm.subjectSelect"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in subjectList"
                  :key="item.id"
                  :label="item.subjectName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="试题类型" prop="testType">
              <el-select v-model="baseTestForm.testType" placeholder="请选择">
                <el-option
                  v-for="item in questionType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="题目备注" prop="testNote">
              <el-input v-model="baseTestForm.testNote"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="二级目录"
              label-position="left"
              prop="secondLevel"
            >
              <el-select
                v-model="baseTestForm.secondLevel"
                placeholder="请选择"
              >
              </el-select>
            </el-form-item>
            <el-form-item label="难度" prop="difficultyVal">
              <el-select
                v-model="baseTestForm.difficultyVal"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in difficulty"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="企业简称" prop="EnterpriseAbbreviation">
              <el-input
                v-model="baseTestForm.EnterpriseAbbreviation"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签" label-position="left" prop="tag">
              <el-select v-model="baseTestForm.tag" placeholder="请选择">
              </el-select>
            </el-form-item>
            <el-form-item label="方向" prop="directionVal">
              <el-select
                v-model="baseTestForm.directionVal"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in direction"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="城市" prop="city">
              <el-select
                v-model="baseTestForm.city"
                placeholder="请选择"
                class="city-form"
                @change="getAreasFn"
              >
                <el-option
                  v-for="(item, index) in citys"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
              <el-select
                v-model="baseTestForm.area"
                placeholder="请选择"
                class="city-form"
              >
                <el-option
                  v-for="(item, index) in areas"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="last-col">
            <el-form-item label="关键字" prop="key">
              <el-input v-model="baseTestForm.key"></el-input>
            </el-form-item>
            <el-form-item label="录入人" prop="man">
              <el-select v-model="baseTestForm.man" placeholder="请选择">
              </el-select>
            </el-form-item>
            <div class="btn">
              <el-button size="small" @click="clearForm">清除</el-button>
              <el-button type="primary" size="small" @click="searchFn"
                >搜索</el-button
              >
            </div>
          </el-col>
        </el-form>
      </el-row>
      <el-alert type="info" show-icon>
        <template slot="title">
          <span>数据一共{{ total }}条</span>
        </template>
      </el-alert>
      <el-table :data="questionList" style="width: 100%" class="testTable">
        <el-table-column prop="number" label="试题编号" width="130">
        </el-table-column>
        <el-table-column prop="subject" label="学科" width="80">
        </el-table-column>
        <el-table-column prop="catalog" label="目录" width="80">
        </el-table-column>
        <el-table-column prop="questionType" label="题型" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.questionType === '1'">单选</span>
            <span v-else-if="scope.row.questionType === '2'">多选</span>
            <span v-else>简答</span>
          </template>
        </el-table-column>
        <el-table-column prop="question" label="题干" width="230">
          <template slot-scope="scope">
            <div v-html="scope.row.question"></div>
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间" width="170">
          <template slot-scope="scope">
            <span>{{ scope.row.addDate | parseTimeByString }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.difficulty === '1'">简单</span>
            <span v-else-if="scope.row.difficulty === '2'">一般</span>
            <span v-else>困难</span>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="100">
        </el-table-column>
        <el-table-column label="操作" width="190">
          <template slot-scope="scope">
            <el-button
              title="预览"
              circle
              plain
              size="small"
              type="primary"
              icon="el-icon-view"
              @click="showTestDialog(scope.row)"
            ></el-button>

            <el-button
              title="修改"
              size="small"
              circle
              plain
              type="success"
              icon="el-icon-edit"
              @click="addTestId(scope.row.id)"
            ></el-button>

            <el-button
              title="删除"
              size="small"
              circle
              plain
              type="danger"
              icon="el-icon-delete"
              @click="deleteQuestion(scope.row.id)"
            ></el-button>
            <el-button
              title="加入精选"
              size="small"
              circle
              plain
              type="warning"
              icon="el-icon-check"
              @click="addChoiceness(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pageSize"
          layout="prev, pager, next, sizes, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
    <el-dialog
      title="题目预览"
      :visible.sync="testDialogVisible"
      width="900px"
      top="15vh"
    >
      <TestView :id="currentTest.id" v-if="testDialogVisible"></TestView>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="testDialogVisible = false"
          >关闭</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { list as getSubjectList } from '@/api/hmmm/subjects.js'
import { provinces } from '@/api/hmmm/citys.js'
import { citys } from '@/api/hmmm/citys.js'
import { list as getQuestionList } from '@/api/hmmm/questions.js'
import { difficulty } from '@/api/hmmm/constants.js'
import { questionType } from '@/api/hmmm/constants.js'
import { direction } from '@/api/hmmm/constants.js'
import TestView from './question/testView'
import { remove as removeQuestion } from '@/api/hmmm/questions.js'
import { choiceAdd } from '@/api/hmmm/questions.js'
export default {
  data() {
    return {
      total: null,
      questionList: [],
      subjectList: [],
      citys: [],
      areas: [],
      difficulty,
      questionType,
      direction,
      baseTestForm: {
        name: '',
        tag: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        subjectSelect: null,
        testType: null,
        testNote: null,
        secondLevel: null,
        difficultyVal: null,
        EnterpriseAbbreviation: null,
        directionVal: null,
        key: null,
        man: null,
        city: null,
        area: null,
      },
      currentPage: 1,
      pageSize: 10,
      testDialogVisible: false,
      currentTest: {},
    }
  },
  created() {
    this.getSubjectListFn()
    this.getCitysFn()
    this.getQuestionListFn()
  },
  methods: {
    onSubmit() {
      console.log('submit!')
    },
    async getSubjectListFn() {
      try {
        const { data } = await getSubjectList({
          pagesize: 20,
        })
        this.subjectList = data.items
      } catch (err) {
        console.log('请求失败', err)
      }
    },
    async getQuestionListFn() {
      try {
        const { data } = await getQuestionList({
          page: this.currentPage,
          pagesize: this.pageSize,
          subjectID: this.baseTestForm.subjectSelect,
          difficulty: this.baseTestForm.defficultyVal,
          questionType: this.baseTestForm.testType,
          tags: this.baseTestForm.tag,
          province: this.baseTestForm.city,
          city: this.baseTestForm.area,
          keyword: this.baseTestForm.key,
          remarks: this.baseTestForm.testNote,
          shortName: this.baseTestForm.EnterpriseAbbreviation,
          direction: this.baseTestForm.directionVal,
          creatorID: this.baseTestForm.man,
          catalogID: this.baseTestForm.secondLevel,
        })
        console.log(data)
        this.total = data.counts
        this.questionList = data.items
      } catch (err) {
        console.log('请求失败', err)
      }
    },
    clearForm() {
      this.$refs.baseTest.resetFields()
      this.baseTestForm.area = ''
    },
    getCitysFn() {
      this.citys = provinces()
    },
    getAreasFn(event) {
      this.areas = citys(event)
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getQuestionListFn()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getQuestionListFn()
    },
    searchFn() {
      this.currentPage = 1
      this.getQuestionListFn()
    },
    addTest() {
      this.$router.push('/questions/new/')
    },
    addTestId(id) {
      this.$router.push({ path: '/questions/new/', query: { id: id } })
    },
    showTestDialog(test) {
      this.currentTest = test
      this.testDialogVisible = true
    },
    deleteQuestion(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          try {
            const { data } = await removeQuestion({
              id: id,
            })
            this.getQuestionListFn()
          } catch (err) {
            this.$message.err('删除失败')
          }
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
        })
        .catch(() => {})
    },
    addChoiceness(id) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info',
      })
        .then(async () => {
          try {
            const { data } = await choiceAdd({
              id: id,
              choiceState: 1,
            })
          } catch (err) {
            this.message.err('加入失败')
          }
          this.$message({
            type: 'success',
            message: '加入精选成功',
          })
        })
        .catch(() => {})
    },
  },
  components: {
    TestView,
  },
}
</script>

<style scoped lang='less'>
.base-container {
  /deep/.base-box-card {
    margin: 12px 10px 10px 10px;
    .point {
      font-size: 12px;
      color: pink;
    }
    .el-input {
      width: 197px;
      height: 32px;
    }
    .city-form {
      width: none;
      .el-input {
        width: 94px;
        margin-right: 4px;
      }
    }
    .form-row {
      margin-top: 36px;
    }
    .last-col {
      position: relative;
      height: 134px;
      .btn {
        position: absolute;
        bottom: 0;
        right: 0;
      }
    }
    .el-alert {
      margin-bottom: 14px;
    }
    .block {
      float: right;
      margin-top: 20px;
      margin-bottom: 20px;
      .el-select {
        .el-input {
          width: 100px;
        }
      }
      .el-pagination__jump {
        margin-left: 0;
        .el-input {
          width: 46px;
        }
      }
      // .el-pager {
      //   width: 30px;
      //   height: 28px;
      //   margin: 0 5px;
      //   background-color: #f4f4f5;
      // }
    }
    .addTest {
      float: right;
      height: 33px;
      background-color: rgb(103, 194, 58);
    }
  }
  .el-dialog {
    .el-dialog__footer {
      .dialog-footer {
        overflow: hidden;
        .el-button {
          float: right;
        }
      }
    }
  }
}
</style>
